<template>
  <div>
    <el-form
    @submit.native.prevent
    :inline="true" class="demo-form-inline">
      <el-form-item label="电影名称">
        <el-input v-model="name" @enter="search" placeholder="电影名称关键字"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="search">查询</el-button>
      </el-form-item>
    </el-form>

    <el-divider content-position="left">电影列表</el-divider>

    <!-- 电影列表 -->
    <div v-if="movieData.result && movieData.result.length!=0">
      <el-table :data="movieData.result">
        <el-table-column label="封面" width="100px" align="center">
          <template slot-scope="scope">
            <img width="60px" :src="scope.row.cover" alt="">
          </template>
        </el-table-column>
        <el-table-column prop="title" label="标题"></el-table-column>
        <el-table-column prop="star_actor" label="主演"></el-table-column>
        <el-table-column prop="showingon" label="上映时间" width="140px"></el-table-column>
        <el-table-column prop="" label="时长" width="120px">
          <template slot-scope="scope">
            {{ scope.row.duration }} 分钟
          </template>
        </el-table-column>
        <el-table-column prop="type" label="所属类别" width="200px"></el-table-column>
        <el-table-column prop="" label="时长" width="220px">
          <template slot-scope="scope">
            <el-button size="samll" type="success" icon="el-icon-user" circle></el-button>
            <el-button size="samll" type="success" icon="el-icon-picture" circle></el-button>
            <el-button size="samll" type="warning" icon="el-icon-edit" circle @click="$router.push(`/home/movie-update/${scope.row.id}`)"></el-button>
            <el-button size="samll" type="danger" icon="el-icon-delete" circle @click="del(scope.row.id)"></el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <el-pagination
        style="margin-top: 20px;"
        background
        layout="->,total,prev,pager,next,jumper"
        :total="movieData.total"
        :page-siz="movieData.pagesize"
        :current-page="movieData.page"
        @current-change="changeCurrentPage($event)"
        ></el-pagination>
    </div>
    <el-empty v-else description="暂无数据"></el-empty>
  </div>
</template>

<script>
import httpApi from '@/http';

  export default {
    data() {
      return {
        movieData: {
          page: 1,
          pagesize: 5,
          total: 0,
          result: []
        },
        name: '',
        keyword: ''
      }
    },
    methods: {
      // 删除电影
      del(id) {
        this.$confirm('将永远删除该电影,是否继续?','提示',{
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(_=>{
          httpApi.movieApi.delete({id}).then(res=>{
            if(this.movieData.result.length == 1 && this.movieData.page > 1){
              this.changeCurrentPage(this.movieData.page - 1)
            }else{
              this.changeCurrentPage(this.movieData.page)
            }
            this.$message.success('删除成功')
          })
        }).catch(err=>{
          this.$message.info('用户取消')
        })
      },

      // 根据关键字,按照页码模糊查询电影列表
      listMoviesByName(page){
        let params = {name:this.keyword,page,pagesize:this.movieData.pagesize}
        httpApi.movieApi.queryAllByName(params).then(res=>{
          this.movieData = res.data.data
        })
      }, 

      // 点击查询按钮 / 敲回车 时 执行
      search(){
        this.keyword = this.name
        if(this.keyword.trim()){
          this.listMoviesByName(1)
        }else{
          this.listMovies(1)
        }
      },

      // 分页器当前页码发生改变时执行
      changeCurrentPage(page){
        if(this.keyword.trim()){
          this.listMoviesByName(page)
        }else{
          this.listMovies(page)
        }
      },

      // 加载电影列表 page 参数为页码
      listMovies(page){
        httpApi.movieApi.queryAll({page,pagesize:this.movieData.pagesize}).then(res=>{
          console.log(res)
          this.movieData = res.data.data
        })
      }
    },
    mounted () {
      this.listMovies(1);
    },
  }
</script>

<style lang="scss" scoped>

</style>